<template>
  <div style="position : absolute;width : 100%;height : 100%;">

    <!-- 阿里云视频播放器样式 -->
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" >
    <!-- 阿里云视频播放器脚本 -->
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js" />

    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player" style="margin: 80px auto;"/>
  </div>
</template>
<script>
import vod from '@/api/vod'

export default {
    layout: 'player',//应用video布局
    asyncData({ params, error }) {
       return vod.getPlayAuth(params.vid)
        .then(response => {
            return { 
                playAuth: response.data.data.playAuth,
                vid: params.vid
            }
        })
    },



    //不能使用created，因为获取视频播放凭证为异步调用，必须等数据渲染完成后再 new Aliplayer
    mounted() { //页面渲染之后  created
        new Aliplayer({
            id: 'J_prismPlayer',
            vid: this.vid,
            playauth: this.playAuth,
            encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
            width: '1000px',
            height: '550px',
            qualitySort: 'asc',

            mediaType: 'video',
            autoplay: false,
            isLive: false,
            rePlay: false,
            preload: true,
            controlBarVisibility: 'hover',
            useH5Prism: true, // 播放器类型：html5
        }, function(player) {
            //console.log('播放器创建成功')
        })
    }

    // //不能使用created，因为获取视频播放凭证为异步调用，必须等数据渲染完成后再 new Aliplayer
    // mounted() { //页面渲染之后  created
    //     new Aliplayer({
    //         id: 'J_prismPlayer',
    //         vid: this.vid, // 视频id
    //         playauth: this.playAuth, // 播放凭证
    //         encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
    //         width: '1000px',
    //         height: '550px',
    //         // 以下可选设置
    //         //cover: 'https://guli-edu-20221107.oss-cn-shenzhen.aliyuncs.com/2023/04/22/banner01.jpeg', // 封面
    //         qualitySort: 'asc', // 清晰度排序

    //         mediaType: 'video', // 返回音频还是视频
    //         autoplay: false, // 自动播放
    //         isLive: false, // 直播
    //         rePlay: false, // 循环播放
    //         preload: true,
    //         controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
    //         useH5Prism: true, // 播放器类型：html5
    //     }, function(player) {
    //         console.log('播放器创建成功')
    //     })
    // }

}
</script>